<template>
  <div class="h_100b d_f d_fw_w">
    <el-table
      :data="plateList"
      stripe
      class="tab"
      :header-cell-style="{ background: '#282c34' }"
      :cell-style="cellStyle"
      row-key="index"
      @row-click="(row) => getPlateStocks(row.code)"
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="code" label="代码" />
      <el-table-column prop="plate_name" label="名称" />
    </el-table>
    <div class="box">
      <el-table
        :data="plateStocks"
        stripe
        class="table"
        :header-cell-style="{ background: '#282c34' }"
        :cell-style="cellStyle"
        row-key="index"
        @row-click="(row) => openClick(row)"
        @sort-change="sortChange"
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="code" label="代码" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="change_rate" label="涨幅" sortable>
          <template #default="{ row }">
            <span>{{ takeDecimal(row.change_rate) + "%" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="last_price" label="现价" sortable />
        <el-table-column prop="turnover" label="成交金额（元）" sortable
          ><template #default="{ row }">
            <span>{{ changeMoney(row.turnover) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="total_market_val" label="总市值（元）" sortable
          ><template #default="{ row }">
            <span>{{ changeMoney(row.total_market_val) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="circular_market_val"
          label="流通市值（元）"
          sortable
          ><template #default="{ row }">
            <span>{{ changeMoney(row.circular_market_val) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="turnover_rate" label="换手率" sortable
          ><template #default="{ row }">
            <span>{{ takeDecimal(row.turnover_rate) + "%" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="pb_ratio" label="市盈率" sortable
          ><template #default="{ row }">
            <span>{{ takeDecimal(row.pb_ratio) + "%" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-space wrap @click.stop="">
              <el-button
                size="small"
                type="primary"
                v-if="!scope.row?.gold_flag"
                @click="handleClick(scope, 'add', 'gold')"
                >加入金池</el-button
              >
              <el-button
                size="small"
                v-else
                @click="handleClick(scope, 'del', 'gold')"
                >取消</el-button
              >
              <el-button
                size="small"
                type="primary"
                v-if="!scope.row?.warn_flag"
                @click="handleClick(scope, 'add', 'warn')"
                >加入预警</el-button
              >
              <el-button
                size="small"
                v-else
                @click="handleClick(scope, 'del', 'warn')"
                >取消预警</el-button
              >
            </el-space>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :pager-count="5"
          @current-change="(e) => getPlateStocks(plate, e)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { takeDecimal, changeMoney } from "@/utils/base.js";
import { ElMessage } from "element-plus";
import { defaultApi } from "@/servers";
import { Percentage } from "@/utils/base.js";
import {
  defineProps,
  defineEmits,
  toRefs,
  watch,
  ref,
  reactive,
  onMounted,
  computed,
} from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const store = useStore();
const plateList = ref([]);
const plateStocks = ref([]);
const plate = ref(null);
const total = ref(0);
const activeCell = ref(null);
const type = computed(() => store.getters.system.type);
const market = computed(() => store.getters.system.market);
// 关注
function handleClick(scope, opt, type) {
  const { row } = scope;
  const { code, name } = row;
  // 关注
  defaultApi
    .opt({
      market: market.value,
      code,
      name,
      opt,
      type,
    })
    .then((data) => {
      ElMessage({
        message: "操作成功",
        type: "success",
      });

      if (type == "gold") scope.row.gold_flag = !scope.row.gold_flag;
      if (type == "warn") scope.row.warn_flag = !scope.row.warn_flag;
    });
}
// 板块列表
async function getPlateList(type = "INDUSTRY") {
  let result = await defaultApi.plateList({
    market: market.value,
    type,
  });
  plateList.value = result;
  plate.value = result[0].code;
  // 默认打开
  if (result.length) getPlateStocks(result[0].code);
}
// 板块列表详情
async function getPlateStocks(plate, page_num = 1, field, sort) {
  activeCell.value = plate;
  plateStocks.value = [];
  defaultApi
    .plateStocks({
      market: market.value,
      plate,
      field,
      sort,
      page_num,
    })
    .then((res) => {
      total.value = res.total;
      plateStocks.value = res.data || [];
    });
}
// 查看
function openClick(row) {
  store.commit("system/SET", { key: "code", value: row.code });
  router.push("/RiskWarning");
}
watch(
  () => route.params,
  ({ type }) => {
    if (type) getPlateList(type);
  }
);
onMounted(() => {
  const { type } = route.params;
  getPlateList(type);
});

// 表格行样式
function cellStyle({ row, rowIndex }) {
  if (activeCell.value == row.code) return { background: "#999" };
  if (rowIndex % 2) {
    return { background: "#282c34" };
  } else {
    return { background: "#282c34eb" };
  }
}
function sortChange(e) {
  const { prop, order } = e;
  let sort = null;
  if (order == "descending") sort = "desc";
  else sort = "asc";
  plateStocks(1, prop, sort);
}
</script>

<style lang="scss" scoped>
.tab {
  background: rgb(40, 44, 52);
  height: 100%;
  color: #fff;
  width: 35%;
  overflow: auto;
}

.box {
  width: 65%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  .table {
    flex: 1;
    background: transparent !important;
    overflow: auto;
    background: rgb(40, 44, 52);
    color: #fff;
  }
  .pagination {
    color: #fff;
    margin: 0 auto;
    ::v-deep .el-pager {
      li {
        color: #fff;
        background: none;
        &.is-active {
          color: #409eff;
        }
        &:hover {
          color: #409eff;
        }
      }
    }
    ::v-deep button {
      color: #fff;
      background: none;
    }
  }
}

@media screen and (max-width: 768px) {
  .tab {
    width: 100% !important;
    height: 50%;
  }
  .box {
    width: 100% !important;
    height: 50%;
    padding-left: 0 !important;
  }
}
</style>